/*
 * @Author: wangtao
 * @Date: 2020-08-20 14:07:42
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-07-13 14:36:45
 * @Description:
 */

import React from 'react';
import {
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
} from 'react-native';
import { iconCamera } from '@/images';
import {
  mainBgColorLightGray,
  mainBgColorWhite,
  px2dp,
  fontColorSecDeepGray,
  mainBgColorBlack,
} from '@/styles';
import baseConfig from '@/config/baseConfig';

const { fileUrl } = baseConfig;
export default class ReceiptCameraCard extends React.PureComponent {
  static defaultProps = {
    title: '这是标题',
    cardWrapStyle: {},
  };

  render() {
    const { title, cardWrapStyle, selectImg, picUrl } = this.props;
    return (
      <TouchableOpacity
        style={[styles.card, cardWrapStyle]}
        onPress={() => selectImg()}
      >
        {picUrl ? (
          <>
            <Image
              source={{ uri: fileUrl + picUrl }}
              resizeMode='stretch'
              style={styles.img}
            />
            <TouchableOpacity style={styles.update} />
            <Text style={styles.updateText}>更改</Text>
          </>
        ) : (
          <>
            <Image
              source={iconCamera}
              resizeMode='stretch'
              style={styles.cameraImg}
            />
            <Text style={styles.desc}>{title}</Text>
          </>
        )}
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: mainBgColorLightGray,
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
  },
  cameraImg: {
    width: px2dp(85),
    height: px2dp(85),
  },
  img: {
    width: '100%',
    height: '100%',
  },
  desc: {
    fontSize: px2dp(26),
    color: fontColorSecDeepGray,
    marginTop: px2dp(24),
  },
  update: {
    width: px2dp(88),
    height: px2dp(48),
    backgroundColor: mainBgColorBlack,
    opacity: 0.5,
    position: 'absolute',
    bottom: px2dp(24),
    left: px2dp(24),
  },
  updateText: {
    fontSize: px2dp(24),
    color: mainBgColorWhite,
    position: 'absolute',
    bottom: px2dp(34),
    left: px2dp(44),
  },
});
